<template>
    <div class="tabbar" v-motion-slide-top>
        <Logo></Logo>
        <Tab></Tab>
        <Handle></Handle>
    </div>
</template>

<script setup>
import Logo from "./components/logo.vue";
import Tab from "./components/tab.vue";
import Handle from "./components/handle.vue";
</script>

<style lang="scss" scoped>
.tabbar {
    width: 100%;
    height: 60px;
    position: fixed;
    z-index: 999;
    top: 0;
    left: 0;
    right: 0;
    display: flex;
    align-items: center;
    box-shadow:0 10px 6px -6px rgba(30, 30, 30, 0.1), 12px 0 8px -8px rgba(50, 50, 50, 0.1);
    transition: all .2s ease-in-out;
    @include font_color("font_color1");
    @include background_color("background_color1");
}
</style>
